<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<f:view>
    <a4j:keepAlive beanName="eventsBean"/>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>EvIn | Events</title>
            <link rel="stylesheet" href="/EvIn/styles/styles.css" type="text/css" />

        </head>

        <body>

            <div id="wrapper">
                <div class="header">
                    <jsp:include page="/common/header.jsp"></jsp:include>
                </div>
                <div class="fullpane">
                    <div class="leftpane">
                        <jsp:include page="/common/main_menu.jsp"></jsp:include>
                    </div>

                    <div class="rightpane">

                        <div class="contentTitle" >
							My events
                        </div>
                        <br/>
                        <h:form id="data_form">
                            <div style="position: absolute;right: 5%;">
                                <a4j:commandLink   value = "+ Add New Event" actionListener="#{eventsBean.newEventAction}" reRender="new_event_form,invitation_form" oncomplete="Richfaces.showModalPanel('new_event_panel'); return false; document.getElementById('new_event_form:event_name').focus();"/>
                            </div>
                            <br/>
                            <h:panelGroup id="user_evens_group">
                                <rich:dataTable  align="center"
                                                 style="text-align:center;width:95%;"
                                                 value="#{eventsBean.userEvents}"
                                                 rendered="#{not empty eventsBean.userEvents}"
                                                 var="event" id="user_events" >
                                    <rich:column sortBy="#{event.name}"  >
                                        <f:facet name="header"><h:outputText value="Name"/></f:facet>
                                        <h:outputText value="#{event.name}"/>
                                    </rich:column>
                                    <rich:column sortBy="#{event.location}" >
                                        <f:facet name="header"><h:outputText value="Location"/></f:facet>
                                        <h:outputText value="#{event.location}"/>
                                    </rich:column>
                                    <rich:column sortBy="#{event.startTime}"  >
                                        <f:facet name="header"><h:outputText value="Start Time"/></f:facet>
                                        <h:outputText value="#{event.startTime}" >
                                            <f:convertDateTime pattern="dd.MM.yyyy HH:mm" />
                                        </h:outputText>
                                    </rich:column>
                                    <rich:column sortBy="#{event.status}"  >
                                        <f:facet name="header"><h:outputText value="Status"/></f:facet>
                                        <h:outputText value="#{event.status}" />

                                    </rich:column>
                                    <rich:column sortBy="#{event.endTime}"  >
                                        <f:facet name="header"><h:outputText value="End "/></f:facet>
                                        <h:outputText value="#{event.endTime}" rendered="#{event.endTime!=null}">
                                            <f:convertDateTime pattern="dd.MM.yyyy HH:mm" />
                                        </h:outputText>
                                        <h:outputText value="Not Defined" rendered="#{event.endTime == null}"/>
                                    </rich:column>
                                    <rich:column  >
                                        <f:facet name="header"><h:outputText value="Action"/></f:facet>
                                        <h:commandLink value="Show" action="#{eventsBean.show}">
                                            <f:setPropertyActionListener  value="#{event}" target="#{eventsBean.selectedEvent}"/>
                                        </h:commandLink>&nbsp;&nbsp;
                                        <h:commandLink rendered="#{event.active}"  value="Cancel" action="#{eventsBean.discard}" immediate="true">
                                            <f:setPropertyActionListener value="#{event}" target="#{eventsBean.selectedEvent}"/>
                                            <a4j:support event="oncomplete" reRender="data_form"/>
                                        </h:commandLink>
                                    </rich:column>
                                </rich:dataTable>
                            </h:panelGroup>

                            <br/>
                            <br/>
                            <div class="contentTitle" >
					Active invitations
                            </div>
                            <br/>
                            <rich:dataTable  align="center"
                                             style="text-align:center;width:95%;"
                                             value="#{eventsBean.invitedEvents}"
                                             var="event" id="invited_events"
                                             rendered="#{not empty eventsBean.invitedEvents}">
                                <rich:column sortBy="#{event.name}"  >
                                    <f:facet name="header"><h:outputText value="Name"/></f:facet>
                                    <h:outputText value="#{event.name}"/>
                                </rich:column>
                                <rich:column sortBy="#{event.location}"  >
                                    <f:facet name="header"><h:outputText value="Location"/></f:facet>
                                    <h:outputText value="#{event.location}"/>
                                </rich:column>
                                <rich:column sortBy="#{event.startTime}"  >
                                    <f:facet name="header"><h:outputText value="Start Time"/></f:facet>
                                    <h:outputText value="#{event.startTime}" >
                                        <f:convertDateTime pattern="dd.MM.yyyy hh:mm" />
                                    </h:outputText>
                                </rich:column>
                                <rich:column sortBy="#{event.status}"  >
                                    <f:facet name="header"><h:outputText value="Status"/></f:facet>
                                    <h:outputText value="#{event.status}" />

                                </rich:column>
                                <rich:column sortBy="#{event.endTime}"  >
                                    <f:facet name="header"><h:outputText value="End "/></f:facet>
                                    <h:outputText value="#{event.endTime}" rendered="#{event.endTime!=null}">
                                        <f:convertDateTime pattern="dd.MM.yyyy HH:mm" />
                                    </h:outputText>
                                    <h:outputText value="Not Defined" rendered="#{event.endTime == null}"/>
                                </rich:column>
                                <rich:column  >
                                    <f:facet name="header"><h:outputText value="Action"/></f:facet>
									[<h:commandLink value="Show" action="#{eventsBean.showInvitedEvent}">
                                        <f:setPropertyActionListener  value="#{event}" target="#{eventsBean.selectedEvent}"/>
                                    </h:commandLink>]
                                </rich:column>

                            </rich:dataTable>
                            <a4j:jsFunction name="refresh_user_events" id="refresh_user_events" reRender="user_events"/>

                        </h:form>
                    </div>
                </div>
            </div>
        </body>
    </html>

    <rich:modalPanel id="new_event_panel" autosized="true" minWidth="350">

        <f:facet name="header">
            <h:outputText value="New Event" />
        </f:facet>

        <f:facet name="controls">
            <h:form>
                <h:commandLink value="Close" onclick="Richfaces.hideModalPanel('new_event_panel'); return false;"/>
            </h:form>
        </f:facet>
        <h:form id="new_event_form">
            <h:panelGroup id="event_form">
                <h:panelGrid columns="2">
                    <h:outputLabel value="Name*:" for="event_name" styleClass="label" />
                    <h:inputText value="#{eventsBean.selectedEvent.name}" size="40" id="event_name" required="true" requiredMessage="Name Required"/>
                    <h:panelGroup/>
                    <h:message for="event_name" styleClass="error_message"/>

                    <h:outputLabel value="Location* :" for="event_location" styleClass="label"/>
                    <h:inputText value="#{eventsBean.selectedEvent.location}" size = "40" id="event_location" required="true" requiredMessage="Location Required"/>
                    <h:panelGroup/>
                    <h:message for="event_location" styleClass="error_message"/>

                    <h:outputLabel value="Start * :" for="starting_time" styleClass="label"/>
                    <h:panelGroup>
                        <rich:calendar  value="#{eventsBean.selectedEvent.startTime}" datePattern="dd.MM.yyyy HH:mm" enableManualInput="true" id="starting_time" required="true" requiredMessage="Start Time Required"/>
                        <a4j:commandLink value="?" styleClass="toolTip">
                            <rich:toolTip >
                                <span style="white-space:nowrap; ">
                                    Start Date&amp;Time of event
                                </span>
                            </rich:toolTip>
                        </a4j:commandLink>
                    </h:panelGroup>
                    <h:panelGroup/>
                    <h:message for="starting_time" styleClass="error_message"/>


                    <h:outputLabel value="End :" for="end_time" styleClass="label"/>
                    <h:panelGroup>
                        <rich:calendar value="#{eventsBean.selectedEvent.endTime}" datePattern="dd.MM.yyyy HH:mm" enableManualInput="true" id="end_time" />
                        <a4j:commandLink value="?" styleClass="toolTip">
                            <rich:toolTip >
                                <span style="white-space:nowrap; ">
                                    Ending Date&amp;Time of event
                                </span>
                            </rich:toolTip>
                        </a4j:commandLink>
                    </h:panelGroup>
                    <h:panelGroup/>
                    <h:message for="end_time" styleClass="error_message"/>

                    <h:outputLabel value="RSVP Due :" for="reply_time" styleClass="label"/>
                    <h:panelGroup>
                        <rich:calendar popup="true" value="#{eventsBean.selectedEvent.responseTime}" datePattern="dd.MM.yyyy HH:mm" enableManualInput="true" id="reply_time"/>
                        <a4j:commandLink value="?" styleClass="toolTip">
                            <rich:toolTip >
                                <span style="white-space:nowrap;" class="link">
                                    Date&amp;Time to witch users can reply to event
                                </span>
                            </rich:toolTip>
                        </a4j:commandLink>
                    </h:panelGroup>
                    <h:panelGroup/>
                    <h:message for="reply_time" styleClass="error_message"/>

                </h:panelGrid>
                <h:panelGrid columns="1">
                    <h:outputLabel value="Description* :" for="event_description" styleClass="label"/>
                    <h:inputTextarea id="event_description"  value="#{eventsBean.selectedEvent.description}" style="width: 300px;height: 150px;" required="true" requiredMessage="Description is required" />
                    <h:message for="event_description" styleClass="error_message"/>
                </h:panelGrid>
            </h:panelGroup>
            <h:panelGrid columns="1" id="upload_grid">
                <h:outputLabel value="Image :" for="image_upload" styleClass="label"/>
                <rich:fileUpload fileUploadListener="#{eventsBean.listener}"
                                 maxFilesQuantity="1"
                                 id="image_upload"
                                 immediateUpload="false"
                                 acceptedTypes="jpg, gif, png, bmp" allowFlash="auto"
                                 listHeight="55" listWidth="300"
                                 >
                </rich:fileUpload>
                <a4j:commandButton immediate="true" value="Invitations..." reRender="invitation_form" oncomplete="Richfaces.showModalPanel('invitation_panel'); refresh_user_events()" />
                <h:panelGroup>
                    <div align="right">
                        <a4j:commandLink value="Save" action="#{eventsBean.save}"  oncomplete="if (#{facesContext.maximumSeverity==null}) {Richfaces.hideModalPanel('new_event_panel'); refresh_user_events()}"
                                         reRender="event_form,data_form"/>
                        &nbsp;
                        <a4j:commandLink value="Save&Add" reRender="event_form,user_evens_group" action="#{eventsBean.save}" oncomplete="refresh_user_events()" />
                    </div>
                </h:panelGroup>
            </h:panelGrid>
        </h:form>
    </rich:modalPanel>

    <rich:modalPanel id="invitation_panel" autosized="true">
        <f:facet name="header">
            <h:outputText value="Contacts" />
        </f:facet>
        <f:facet name="controls">
            <h:form>
                <h:commandLink value="Close" immediate="true" onclick="Richfaces.hideModalPanel('invitation_panel'); return false;"/>
            </h:form>
        </f:facet>

        <a4j:form id="invitation_form">
            <div style="height:500px ; width:600px; overflow-x:auto; overflow-y:scroll">

                <rich:dataTable  align="center" 
                                 style="text-align:center;width:95%;"
                                 value="#{eventsBean.contacts}"
                                 var="contact"

                                 rowKeyVar="index"
                                 id="invite_table"
                                 reRender="invitation_form"
                                 >
                    <rich:column id="selection_column">
                        <f:facet name="header">
                            <h:selectBooleanCheckbox value="#{eventsBean.allContactSelectionState}">
                                <a4j:support event="onclick" actionListener="#{eventsBean.toggleSelection}" reRender="selection_column"/>
                            </h:selectBooleanCheckbox></f:facet>
                        <h:selectBooleanCheckbox value="#{eventsBean.contactInvites[contact.id]}">
                            <a4j:support event="onclick" process="" />
                        </h:selectBooleanCheckbox>
                    </rich:column>
                    <rich:column filterBy="#{contact.firstName}" >
                        <f:facet name="header"><h:outputText value="First Name"/></f:facet>
                        <h:outputText value="#{contact.firstName}"/>
                    </rich:column>
                    <rich:column filterBy="#{contact.lastName}"  >
                        <f:facet name="header"><h:outputText value="Last Name"/></f:facet>
                        <h:outputText value="#{contact.lastName} " />
                    </rich:column>
                    <rich:column filterBy="#{contact.email}" >
                        <f:facet name="header"><h:outputText value="Contact Email"/></f:facet>
                        <h:outputText value="#{contact.email}" />
                    </rich:column>
                </rich:dataTable>

            </div>

            <div style="float:right;position: relative;right: 20px;top: 5px">
                <%--
				<a4j:commandLink value="Apply filter" reRender="invitation_form" style="text-align:left"/>
				&nbsp;&nbsp;
                --%>
                <h:commandLink value="Save selection" type="submit" onclick="Richfaces.hideModalPanel('invitation_panel'); return false;"/>
            </div>
        </a4j:form>

    </rich:modalPanel>


</f:view>

